import React from 'react'
import FirstBg from "../../../../../../../res/images/web/game-room/tip blue 1@2x.png"
import SecondBg from "../../../../../../../res/images/web/game-room/tip blue 2@2x.png"
import constants from "../../../../../../../utils/constants";

const ResultPipe = props => {
    const {
        pipeData,
        dataEmpty,
        title,
        rateArr,
        type,
    } = props

    // console.log(props)
    const parseFloatToPercent = float => {
        // console.log(float)
        if (float === undefined) return ''
        const to2 = float.toFixed(4)
        if (Number.isNaN(to2)) return ''
        const arr = to2.split('.')
        const floatString = arr[1]
        if (floatString === undefined) return ''
        let result = Number(floatString.slice(0, 2))
        const last = Number(floatString.slice(2, 4))
        if (last > 50) {
            result = result + 1
        } else {
            // result = result - 1
        }
        // const result = Number(to2.split('.')[1])
        return result
    }


    if (dataEmpty) {
        return <div style={{
            width: '100%',
            height: '12px',
            borderRadius: '6px',
            backgroundColor: 'rgba(51,51,51,0.04)',
            textAlign: 'center',
            margin: '0 auto'
        }}>
            {/*<span style={{*/}
            {/*    fontSize: '12px',*/}
            {/*    color: 'rgba(51,51,51,1)',*/}
            {/*    lineHeight: '12px',*/}
            {/*    opacity: '0.6',*/}
            {/*}}>暂无预测结果</span>*/}
        </div>
    }


    const {
        one,
        two,
        three,
    } = pipeData
    // console.log(pipeData)

    const r1 = one.rate
    const r2 = two.rate
    const r3 = three.rate
    const total = r1 + r2 + r3
    let v1, v2, v3
    if (type === 1) {
        const RQHomeRate = r1
        // const RQDate = RQ[1]
        const RQAwayRate = r3
        let RQHome = parseFloatToPercent(RQAwayRate / total)
        // let RQHome = Number((RQAwayRate / RQTotal).toFixed(2)) * 100
        // console.log(RQHome)
        let RQAway = parseFloatToPercent(RQHomeRate / total)
        if (RQHome === RQAway) {
            if (RQHomeRate > RQAwayRate) {
                RQHome--
                RQAway++
            } else {
                RQHome++
                RQAway--
            }
        }
        v1 = RQHome
        v3 = RQAway
    }
    if (type === 2) {
        let temp = [...rateArr].slice(0, 3).sort((a, b) => b - a)
        let first = temp[0]
        let second = temp[1]
        let third = temp[2]
        // let total = first + second + third
        let firstPer = parseFloatToPercent(first / total)
        let secondPer = parseFloatToPercent(second / total)
        let thirdPer = parseFloatToPercent(third / total)

        let perArr = []
        let firstIndex = rateArr.findIndex(item => item === first)
        let secondIndex = rateArr.findIndex(item => item === second)
        let thirdIndex = rateArr.findIndex(item => item === third)
        if (firstPer === secondPer) {
            firstPer++
            secondPer--
        } else if (secondPer === thirdPer) {
            secondPer++
            thirdPer--
        }
        perArr[firstIndex] = thirdPer
        perArr[secondIndex] = secondPer
        perArr[thirdIndex] = firstPer
        v1 = perArr[0]
        v2 = perArr[1]
        v3 = perArr[2]
    }

    if (type === 3) {
        const DXQHomeRate = r1
        const DXQAwayRate = r3
        let DXQHome = parseFloatToPercent(DXQAwayRate / total)
        // cons
        // console.log(RQHome)
        let DXQAway = parseFloatToPercent(DXQHomeRate / total)
        v1 = DXQHome
        v3 = DXQAway
    }


    const t1 = one.title
    const t2 = two.title
    const t3 = three.title


    // const floatToPer = (val) => {
    //     let r = JSON.stringify(val)
    //     if (r && r.includes('.')) {
    //         r = JSON.stringify(val).slice(2)
    //         if (r.length === 2) {
    //             return `${r}%`
    //         } else {
    //             return `${r}0%`
    //         }
    //     } else {
    //         return `${val}%`
    //     }
    // }

    const dataToDiv = (value, rate, color, order) => {
        const m = {
            whole: '6px 6px 6px 6px',
            left: '6px 0 0 6px',
            mid: 'none',
            right: '0 6px 6px 0',
        }
        let borderRadius

        if (order === 0) {
            borderRadius = m.left
        }

        if (order === 1) {
            borderRadius = m.mid
            // if (!v1) {
            //     borderRadius = m.left
            // } else if (!v3) {
            //     borderRadius = m.right
            // } else {
            //     borderRadius = m.mid
            // }
        }
        if (order === 2) {
            borderRadius = m.right
        }

        let rank = -1
        let icon = null
        if (title === '胜平负' || title === '胜负平') {
            // const getRank
            const vs = [r1, r2, r3,].sort((a, b) => a - b)
            rank = vs.findIndex(r => r === rate)
        }

        const first = <div
            style={{
                position: 'absolute',
                top: '-25px',
                left: '50%',
                transform: 'translateX(-50%)',
            }}
        >
            <div style={{position: 'relative'}}>
                <img src={FirstBg} alt='' style={{width: '37px'}}/>
                <span
                    style={{
                        position: 'absolute',
                        left: '7px',
                        top: '2px',
                        fontSize: '12px',
                        color: 'rgb(255,255,255)',
                    }}
                >
                    首选
                </span>
            </div>

        </div>
        const second = <div
            style={{
                position: 'absolute',
                top: '-25px',
                left: '50%',
                transform: 'translateX(-50%)',
            }}
        >
            <div>
                <img src={SecondBg} alt='' style={{width: '37px'}}/>
                <span
                    style={{
                        position: 'absolute',
                        left: '7px',
                        top: '2px',
                        fontSize: '12px',
                        color: '#213A4B',
                    }}
                >
                    次选
                </span>
            </div>
        </div>

        if (rank === 0) {
            icon = first
        } else if (rank === 1) {
            icon = second
        }

        return <div
            style={{
                width: `${value}%`,
                backgroundColor: color,
                height: '12px',
                borderRadius,
                position: 'relative',
            }}
        >
            {icon}
            {/*<div><img src={} alt=''/></div>*/}
        </div>
    }

    const dataToNum = (v, t, c1, c2) => {

        if (!v) return null
        return <div className='flex-space-between-align-center'>
            <div
                style={{
                    height: '6px',
                    width: '6px',
                    borderRadius: '50%',
                    background: c1,
                    marginRight: '4px',
                }}
            />
            <span style={{
                fontSize: '12px',
                color: 'rgba(51,51,51,1)',
                lineHeight: '17px',
            }}>{t}</span>
            <span style={{
                fontSize: '22px',
                fontWeight: 'bold',
                color: c2,
                lineHeight: '26px',
                marginLeft: '8px',
            }}
            >{`${v}%`}</span>
        </div>
    }


    return <div style={{marginTop: '24px',}}>
        {/*{rateArrDiv}*/}

        <div style={{
            width: '90%',
            height: '12px',
            borderRadius: '6px',
            backgroundColor: 'rgba(51,51,51,0.04)',
            textAlign: 'center',
            margin: '8px auto',
            display: 'flex',
        }}>
            {dataToDiv(v1, r1,'#FA7268', 0)}
            {dataToDiv(v2, r2,'#FFA500', 1)}
            {dataToDiv(v3, r3,'#0FC6A6', 2)}
        </div>

        <div className='flex-space-around-align-center' style={{width: '80%', margin: '0 auto',}}>
            {dataToNum(v1, t1, '#FA7268', constants.themeColor)}
            {dataToNum(v2, t2, '#FFA500', constants.themeColor)}
            {dataToNum(v3, t3, '#0FC6A6', constants.themeColor)}
        </div>

    </div>

}

export default ResultPipe
